import * as React from 'react';
import useAuth from '@/utils/hooks/useAuth';
import './index.module.scss';
import { Form, Input, Picker, Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { iteratee, values } from 'lodash';
import { sleep } from 'antd-mobile/es/utils/sleep';
const { useEffect, memo, useState, useRef } = React;
interface passengerInfoProps {
  passengerData: {
    ticketType: string;
    booker: string;
    idCard: string;
    cardType: string;
    phoneNumber: string;
  };
}
export default function PassengerInfo(props: passengerInfoProps) {
  const { passengerData } = props;
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const formEl = useRef(null);
  const passengerOptions = [
    [
      { label: '成人票', value: '成人票' },
      { label: '学生票', value: '学生票' },
    ],
  ];
  const cardOptions = [
    [
      { label: '中国大陆身份证', value: '中国大陆身份证' },
      { label: '港澳居住证', value: '港澳居住证' },
    ],
  ];
  const [visible, setVisible] = useState(false);
  const [cardvisible, setCardvisible] = useState(false);
  const onSubmit = async (values: object) => {
    await sleep(1000);
    Toast.show({
      icon: 'success',
      content: '保存成功',
      duration: 1200,
      afterClose: () => {
        navigate(`/passengers`);
      },
    });
  };
  useEffect(() => {
    form.setFieldsValue(passengerData);
  }, [passengerData]);
  return (
    <Form
      form={form}
      layout="horizontal"
      mode="card"
      initialValues={passengerData}
      onFinish={onSubmit}
      footer={
        <Button
          block
          type="submit"
          styleName="submit-button"
          color="primary"
          size="large"
        >
          提交
        </Button>
      }
    >
      <Form.Item
        label="乘客类型"
        arrow
        name="ticketType"
        rules={[{ required: true, message: '请选择乘客类型!' }]}
        trigger="onConfirm"
        onClick={(v) => {
          setVisible(true);
        }}
      >
        <Input placeholder="请选择乘客类型" />
      </Form.Item>
      {/* {passengerData} */}
      <Form.Item
        label="姓名"
        name="booker"
        help="提示信息"
        rules={[{ required: true, message: '请选输入乘客姓名!' }]}
      >
        <Input placeholder="与乘客证件姓名一致" />
      </Form.Item>
      <Form.Item
        label="证件类型"
        name="cardType"
        arrow
        trigger="onConfirm"
        rules={[{ required: true, message: '请选择证件类型!' }]}
        onClick={() => {
          setCardvisible(true);
        }}
      >
        <Input placeholder="请输入" />
      </Form.Item>
      <Form.Item
        label="证件号码"
        name="idCard"
        rules={[{ required: true, message: '请输入证件号码!' }]}
      >
        <Input placeholder="与乘客证件姓名一致" />
      </Form.Item>
      <Form.Item
        label="手机号码"
        name="phoneNumber"
        rules={[
          { required: true, message: '请输入手机号码!' },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请正确填写手机号!' },
        ]}
      >
        <Input placeholder="请输入手机号码" />
      </Form.Item>
      <Form.Item>
        <span styleName="notice-word">
          为配合疫情防控工作，需提供每名乘客的{' '}
          <span styleName="red">本人手机号</span>
          ，老人或无手机号的乘客，可填写亲友手机号
        </span>
      </Form.Item>
      <Picker
        columns={passengerOptions}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={[passengerData.ticketType]}
        onConfirm={(v) => {
          form.setFieldsValue({ ticketType: v[0] });
          setVisible(false);
        }}
      />
      <Picker
        columns={cardOptions}
        visible={cardvisible}
        onClose={() => {
          setCardvisible(false);
        }}
        value={[passengerData.cardType]}
        onConfirm={(v) => {
          form.setFieldsValue({ cardType: v[0] });
          setCardvisible(false);
        }}
      />
    </Form>
  );
}
